<template>
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <a-steps class="steps" :current="currentTab">
          <a-step title="选择优惠券" />
          <a-step title="确认发券" />
          <a-step title="完成" />
        </a-steps>
        <div class="content">
          <step1 v-if="currentTab === 0" @nextStep="nextStep2" :params="model"/>
          <step2 v-if="currentTab === 1" @nextStep="nextStep3" @prevStep="prevStep" :params="model" ref="step2"/>
          <step3 v-if="currentTab === 2" @finish="finish" ref="step3"/>
        </div>
      </a-card>
    </a-spin>
</template>

<script>
  import Step1 from './Step1'
  import Step2 from './Step2'
  import Step3 from './Step3'

  export default {
    name: "DistCouponStepForm",
    inject:['closeCurrent'],
    components: {
      Step1,
      Step2,
      Step3
    },
    data () {
      return {
        title: '会员发券',
        loading: false,
        currentTab: -1,
        model:{
          ty: '',
          memberIds: "",
          queryParam: {},
        },
      }
    },
    activated() {
      console.log('---activated---')
      this.init()
    },
    methods: {
      init(){
        this.model = this.$route.params
        console.log('===model===', this.model)
        console.log('===queryParam===', this.model.queryParam)
        if(this.model == null || !this.model.ty){
          alert('当前页面不支持刷新，请重新进入')
          this.closeCurrent()
        }

        this.currentTab = 0
      },
      handleCancel() {
        this.visible = false
      },
      // handler
      nextStep2(distModel) {
        console.log('distModel', distModel)

        if (this.currentTab < 2) {
          this.currentTab += 1
        }
        this.$nextTick(function(){
          this.$refs.step2.batchDistCoupon(distModel)
        })
        
      },
      nextStep3(distRes) {
        if (this.currentTab < 2) {
          this.currentTab += 1
        }
        this.$nextTick(function(){
          this.$refs.step3.showResult(distRes)
        })
      },
      prevStep () {
        if (this.currentTab > 0) {
          this.currentTab -= 1
        }
      },
      finish () {
        this.currentTab = 0
      }
    }
  }
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
</style>